<template>
  <view class="flex-col">
    <view class="flex justify-between items-center px-4 pt-4">
      <view class="text-[1rem] text-[#242424]">常用功能</view>
    </view>
    <uni-grid :showBorder="Boolean(data.border)" :column="4">
      <uni-grid-item v-for="(item, index) in datalist" :key="index" @tap="handleClick(item)">
        <view class="grid-item-box ss-flex ss-flex-col ss-row-center ss-col-center">
          <view class="img-box">
            <view class="tag-box" v-if="item.badge.show" :style="[{ background: item.badge.bgColor, color: item.badge.color }]">
              {{ item.badge.text }}
            </view>
            <image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
          </view>

          <view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
            <view class="grid-text" :style="[{ color: item.title.color }]">
              {{ item.title.text }}
            </view>
            <view class="grid-tip" :style="[{ color: item.tip.color }]">
              {{ item.tip.text }}
            </view>
          </view>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';

  const props = defineProps({
    data: {
      type: Object,
      default() {},
    },
  });
  const datalist = ref([]);
  function handleClick(item) {
    console.log('🚀 ~ handleClick ~ item:', item.url);
    if (item.url == '/pages/yy/enteringTheStore') {
      sheep.$router.go('/pages/yy/enteringTheStore?title=1');
    } else {
      sheep.$router.go(item.url);
    }
  }

  watch(
    () => props.data,
    (newValue, oldValue) => {
      console.log('newValue==> ', newValue);

      sheep.$api.yy.myInfo().then((res) => {
        console.log('🚀 ~ res:', res);
        uni.getStorageSync('userInfos');
        let is_shoppower = res.data.is_shoppower; // 店铺权限   url == /pages/yy/storeManagement
        let is_brandpower = res.data.is_brandpower; // 品牌权限  url == /pages/yy/brand
        let is_storepower = res.data.is_storepower; // 门店权限   url == /pages/yy/enteringTheStore

        // 根据权限过滤菜单项
        let x = newValue.list.filter((item) => {
          // 检查店铺权限
          if (item.url === '/pages/yy/storeManagement' && !is_shoppower) {
            return false;
          }

          // 检查品牌权限
          if (item.url === '/pages/yy/brand' && !is_brandpower) {
            return false;
          }

          // 检查门店权限
          if (item.url === '/pages/yy/enteringTheStore' && !is_storepower) {
            return false;
          }

          return true;
        });
        console.log('filteredData==> ', x);
        datalist.value = x;
      });
    },
    {
      immediate: true,
    },
  );
  // myInfo();
  // function myInfo() {
  //   sheep.$api.yy.myInfo().then((res) => {
  //     let is_shoppower = res.data.is_shoppower; // 店铺权限   url == /pages/yy/storeManagement
  //     let is_brandpower = res.data.is_brandpower; // 品牌权限  url == /pages/yy/brand
  //     let is_storepower = res.data.is_storepower; // 门店权限   url == /pages/yy/enteringTheStore
  //   });
  // }
</script>

<style lang="scss" scoped>
  .menu-image {
    width: 24px;
    height: 24px;
  }
  .grid-item-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    .img-box {
      position: relative;
      .tag-box {
        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;
        font-size: 2em;
        line-height: 1;
        padding: 0.4em 0.6em 0.3em;
        transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
        transform-origin: 100% 0;
        border-radius: 200rpx;
        white-space: nowrap;
      }
    }

    .title-box {
      .grid-tip {
        font-size: 24rpx;
        white-space: nowrap;
        text-align: center;
      }
    }
  }
</style>
